<template>
  <div class="jr-keyboard"  @click.stop="x">
    <div class="keyboard">

      <transition name="fold">
        <div>
            <!-- 选择付款方式 -->
          <!-- <Choose-payment :intData="payInfo"></Choose-payment> -->
          <!-- 键盘 -->
          <div class="keyboard-main fixed-x" v-if="!!keyBoardState.keyBoard">
             <!-- 键盘头部 -->
            <div class="keyboard-main-header"  v-if="keyBoardState.isShowHeader">
              <div
                class="empty"
                @click="closeFun"
              ></div>
              <h1
                class="title"
                v-text="titleText"
              ></h1>
            </div>
            <div class="keyboard-main-frame">
               <!-- 密码输入框 -->
              <div class="from-pwd" v-show="keyBoardState.pawdInput">
                <ul>
                  <li
                    v-for="(item, index) in balls"
                    :class="{bai:balls[index].show}"
                    :key="index"
                  ><span v-if="!!item.show"></span></li>
                </ul>
                <a
                  class="forget"
                  href="javascript:;"
                  @click="tipsFun"
                >忘记密码？</a>
              </div>
              <!--验证码输入框-->
              <div class="from-ver" v-show="keyBoardState.VerificationInput">
                <div class="verifica_text">
                  <span
                    v-for="(item, index) in balls"
                    v-text="item.verNum"
                    :key="index"
                  ></span>
                </div>
                <input
                  type="button"
                  class="verifica_btn"
                  value="发送验证码"
                  @click="getVerificationCode"
                />
              </div>
            </div>
             <!-- 支付方式选择 -->
             <div class="choosePayment" v-if="keyBoardState.choosePay">
                <ul>
                  <li>
                    <div class="left">
                       <span>￥</span>
                       <div>
                          <p>余额账户</p>
                          <p>可用资产<span v-text="payInfo.money"></span>元</p>
                       </div>
                    </div>
                    <div class="right"></div>
                  </li>
                </ul>
                 <div class="actualPayMoney" >
                    实际支付&nbsp;<span v-text="`￥${_keepFoatMoney(tradeMoney)}`"></span>
                 </div>
                <div class="confirm" @click="_confirmInto">确认转入</div>
             </div>
             <!-- 键盘按键区域 -->
            <table class="keyboard-main-content" ref="listContent" v-if="!keyBoardState.choosePay">
              <tbody>
                <tr v-for="(items, index) in keyBoardlists" :key="index">
                  <td
                    v-if="item!=='del'"
                    v-for="(item, index) in items"
                    @click.stop="keyBoard(item)"
                    v-text="item==='clean'?'清除':item"
                    :class="{clean:item==='clean'}"
                    :key="index"
                  ></td>
                  <td
                    v-if="item==='del'"
                    v-for="item in items"
                    @click.stop="keyBoardDel"
                    :class="{del:item==='del'}"
                    :key="item"
                  ><img
                    src="./images/delete_data64.png"
                    alt=""></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </transition>
    </div>
    <!-- 底部模糊层 -->
    <transition name="fade">
      <div
        class="keyboard-mask"
        v-show="keyBoardState.isMask"
        @click="closeFun"
      ></div>
    </transition>
</div>
</template>

<script >
let boll = "●";
import ChoosePayment from "./choosePayment.vue";
// import loading from "../components/loading";
export default {
  name: "keyBoard",
  components: {
    ChoosePayment
  },
  props: {
    isShowBlankList: {
      type: Boolean,
      default: false
    },
    intKeyBoardState: {
      type: Object,
      default() {
        return {
        isInput: 0, // 是否仅用作输入，
        keyBoard:0, // 是否显示键盘主体
        isMask:0, // 是否显示遮罩层
        isShowHeader: 0, // header是否显示
        pawdInput: 0, // 密码输入框是否显示
        VerificationInput: 0,// 验证码输入框是否显示，
        choosePay:0, // 选择付款方式
        confirm:0, // 是否显示确认按钮
        };
      }
    },
    coupon_id: {
      type: String,
      defaule: ""
    },
    money: {
      type: [String, Number]
    },
    payType: {
      type: Number
    },
    payProductid: {
      type: Number
    },
    type: {
      type: Number
    },
    buyType: {
      type: Number
    },
    cuserid: {
      type: Number
    },
    orderData: {
      type: Object
    },
    value: {
      type: String,
      default: ""
    },
    payInfo: {
      // 支付数据相关信息，
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      showLoading: false,
      dropBalls: [],
      keyBoardlists: [
        ["1", "2", "3"],
        ["4", "5", "6"],
        ["7", "8", "9"],
        ["clean", "0", "del"]
      ],
      payNum: "",
      // 键盘数据
      balls: [
        { show: false, boll, verNum: "" },
        { show: false, boll, verNum: "" },
        { show: false, boll, verNum: "" },
        { show: false, boll, verNum: "" },
        { show: false, boll, verNum: "" },
        { show: false, boll, verNum: "" }
      ],
      verNum: "", // 验证码专用
      payPwd: "", // 密码专用
      tradeMoney:'', // 输入金额（仅用作输入键盘是有用）
      keyBoardState: {},
      keyBoardValue: "" ,// 键盘输入
      // 私有
    };
  },
  created() {},
  computed: {
    titleText() {
      let keyBoardState = this.keyBoardState;
      let text = "";
      if (keyBoardState.choosePay) {
        text = "确认付款";
      } else if (keyBoardState.pawdInput) {
        text = "请收输入密码";
      }
      return text;
    },
    data(){
      return this.sessionGet('data')
    }
  },
  mounted() {
    this.keyBoardState = { ...this.intKeyBoardState };
    console.log("----------", this.keyBoardState);
  },
  beforeDestroy() {
    console.log("销毁了");
    clearInterval(this.play);
  },
  methods: {
    tipsFun() {
      this.$flash("请移步鲸鱼APP找回密码");
    },
    selectBlank() {
      //选择银行卡
      this.$emit("closeBlankList", false);
      this.showKeyboard = true;
    },
    // 清除键盘数据
    closeFun() {
      clearInterval(this.play);
      this.orderid = "";
      this._initKeyBoard(false);
      this.$emit("closeBlankList", false);
    },

    // 键盘操作
    keyBoard(val) {
      console.log("xxthis.tradeMoneyxx", this.tradeMoney);
      let keyBoardState = this.keyBoardState;

      if (val !== "clean") {
        // 用作输入
        if (keyBoardState.isInput) {
          this.balls[this.payPwd.length].verNum = val;
          this.keyBoardValue += val;

          // 密码输入
        } else if (keyBoardState.pawdInput) {
          let ln = this.payPwd.length
          this.balls[this.payPwd.length].verNum = val;
          this.balls[this.payPwd.length].show = true;
          this.payPwd+=val;
          if(this.payPwd.length==6){
            this.validOrder()
          }
          // console.log('密码输入', this.payPwd)
          // this.verNum += val;
        }
      } else {
        this._initKeyBoard(this.showVer);
      }
    },

    // 初始化键盘数据
    _initKeyBoard(bool) {
      // console.log('----', bool)
      !bool ? clearInterval(this.play) : "";
      this.verNum = "";
      this.payPwd = "";
      this.keyBoardValue = "";
      this.showVer = bool ? bool : false;
      // this.showVer =  false
      this.balls.forEach((ele, index) => {
        ele.show = false;
        ele.verNum = "";
      });
    },

    // 删除按钮
    keyBoardDel() {
      // if (this.showLoading) return;
      let keyBoardState = this.keyBoardState
      let indexNum
      if(keyBoardState.isInput){ //删除输入内容
        indexNum = this.keyBoardValue.length;
      }else if(keyBoardState.pawdInput){ // 密码操作
        indexNum = this.payPwd.length;
      }else if(keyBoardState.VerificationInput){// 验证码操作
        indexNum = this.verNum.length;
      }
      // console.log('删除', !this.showVer )
      if (indexNum === 0) {
        this.balls[0].verNum = "";
        this.balls[0].show = false;
        this.payPwd = this.verNum = "";
        return;
      }
      this.keyBoardValue = this.keyBoardValue.substr(0, indexNum - 1);
      // console.log("删除", this.verNum);
      this.balls[indexNum - 1].show = false;
      this.balls[indexNum - 1].verNum = "";
      this.payPwd = this.payPwd.substring(0, indexNum - 1);
      // this.verNum = this.verNum.substring(0, this.verNum.length - 1);
      //  console.log('删除', this.verNum)
    },

    _confirmInto(){
      this.keyBoardState.choosePay = 0 // 关闭支付方式选择
      this.keyBoardState.pawdInput = 1
    },
    // 验证交易密码
    validOrder() {
      console.log('验证交易密码')
      let payInfo = this.payInfo
      let params = {
        productId:payInfo.projectid,
        investMoney:this.tradeMoney,
        couponId:'',
        tradePwd:this.payPwd,
        data:this.data
      }
      this.$http('/jyd/invest',params).then(res=>{
        console.log(res)
        if(res.code == 10000){
          this.keyBoardState.pawdInput = 0
          this.$router.replace('/paySuccess')
          // this.$flash(res.msg)
        }else if(res.code==10003){
          // 交易密码错误（小于三次）清空输入
          this._initKeyBoard();
          this.$flash(res.msg)
        }else if(res.code == 10002){ // 未设置交易密码
          this.closeFun();
          this.$messagebox({
            title:'温馨提示',
            message:res.msg,
          },(sign)=>{
            if(sign=='confirm'){
              this.$JinrSDK.setPwsd()
            }
          })
        }else{ // 其他情况关闭键盘提示
          this.closeFun();
          this.$flash(res.msg)
        }
      })
    },

    // 验证验证码
    validateCode() {},

    // 发送验证码
    getVerificationCode() {},

    // 倒计时效果
    _countDown() {
      clearInterval(this.play);
      let codeTime = 60;
      let verificaBtn = document.getElementsByClassName("verifica_btn")[0];
      verificaBtn.value = codeTime + "s";
      verificaBtn.disabled = true;
      verificaBtn.setAttribute("class", "verifica_btn");

      // 时间倒计时
      this.play = setInterval(() => {
        let verificaBtn = document.getElementsByClassName("verifica_btn")[0];
        codeTime--;
        if (codeTime === 0 || codeTime < 0) {
          verificaBtn.value = "重新获取";
          clearInterval(this.play);
          verificaBtn.disabled = false;
          verificaBtn.setAttribute("class", "verifica_btn");
          return;
        }
        verificaBtn.value = codeTime + "s";
      }, 1000);
    },
    // 用作输入
    x() {}
    //
  },
  watch: {
    keyBoardValue(val) {
      console.log('---xxxxxinputxxxx--',parseFloat(val))
      if(this.keyBoardState.isInput){ // 仅用作输入时触发
        this.tradeMoney = val
        this.$emit("input", this.tradeMoney);
      }
    },
    value(val) {
      // console.log('vv',vv)
      this.keyBoardValue = val;
    },
    intKeyBoardState: {
      handler(val) {
        // 同步键盘状态
        this.keyBoardState = { ...val };
        if(val.keyBoard){ // 键盘按键弹出时，同步金额
          this.keyBoardValue = this.tradeMoney
        }
      },
      deep: true
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '~style/mixin.styl';

.keyboard {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: rem(0);
  color: rgba(255, 255, 255, 0.4);
  z-index: 999;

  .keyboard-main, .blank-list {
    // 购物车清单
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    transform: translate3d(0, -100%, 0);
    transition: all 0.3s;
    background: #ffffff;
    color: wordDfColor;

    &.fold-enter {
      transform: translate3d(0, 0, 0);
    }

    &.fold-leave {
      transform: translate3d(0, -100%, 0);
    }

    &.fold-leave-active {
      transform: translate3d(0, 0, 0);
    }

    .keyboard-main-header {
      position: relative;
      height: rem(100);
      line-height: @height;
      padding: 0 rem(32);
      font-size: rem(44);

      &:before {
        content: '';
        position: absolute;
        height: 1px;
        width: 100%;
        bottom: 0;
        right: 0;
        background-color: #e9e9e9;
      }

      .empty {
        float: left;
        margin-top: rem(25);
        padding: rem(10);
        margin-right: rem(10);
        border-radius: 50%;
        position: relative;
        width: rem(30);
        height: @width;
        border-radius: 50%;

        &:before, &:after {
          content: '';
          position: absolute;
          height: rem(2.5);
          width: 60%;
          top: 50%;
          left: 0;
          margin-top: -0.04rem;
          border-radius: 0.01rem;
          background: huise9;
        }

        &:before {
          transform: rotate(45deg);
        }

        &:after {
          transform: rotate(-45deg);
        }
      }

      .title {
        // font-size rem(32)
        text-align: center;
        text-indent: rem(-60);
        color: rgb(7, 17, 27);
      }
    }

    .keyboard-main-frame {
      text-align: center;

      .loadPwd {
        height: rem(310);
        position: relative;
      }

      .from-pwd {
        // height rem(310)
        padding: 60px 0 0;

        h5 {
          padding-top: rem(15);
          line-height: rem(100);
          font-size: rem(28);
        }

        ul {
          margin: 0 rem(30);
          overflow: hidden;
          border: 1px solid #acacac;
          border-radius: rem(12);

          li {
            position: relative;
            float: left;
            height: rem(100);
            width: 112px;
            line-height: @height;
            font-size: rem(85);
            border-right: 1px solid #acacac;
            color: #f3f5f7;

            span {
              position: absolute;
              top: 50%;
              left: 50%;
              width: rem(26);
              height: @width;
              border-radius: 50%;
              transform: translate3d(-50%, -50%, 0);
              background-color: #000;
            }
          }

          li.bai {
            color: wordDfColor;
          }

          li:last-child {
            border-right: none;
          }
        }

        & > a.forget {
          display: block;
          width: auto;
          height: auto;
          position: static;
          padding-right: rem(35);
          margin-bottom: rem(42);
          border-top: none;
          text-align: right;
          line-height: rem(50);
          font-size: rem(28);
          background-color: #ffffff;
          color: mainColor;
        }
      }

      .loadVer {
        position: relative;
        height: rem(90);
        padding: rem(36) rem(48) rem(42);
      }

      .from-ver {
        height: rem(90);
        padding: rem(36) rem(48) rem(42);
        line-height: @height;
        text-align: center;
        background-color: baise;

        .verifica_text {
          float: left;
          overflow: hidden;
          height: rem(90);
          padding: 0 rem(80);
          border-radius: rem(12);
          background-color: #f3f3f3;

          span {
            display: inline-block;
            width: rem(34);
            font-size: rem(46);
          }
        }

        input.verifica_btn {
          float: right;
          width: rem(220);
          height: rem(90);
          border: none;
          line-height: @height;
          font-size: rem(36);
          border-radius: rem(12);
          background-color: mainColor;
          color: #ececec;
        }

        input::-webkit-input-placeholder {
          font-size: rem(30);
          line-height: rem(90);
          color: baise;
        }

        input.verifica_btn:disabled {
          background-color: #ccc;
          letter-spacing: 2px;
          color: baise;
        }

        input.verifica_btn:active {
          background-color: #6699ff;
        }
      }

      .cube-loading {
        width: 200px;
        margin: 200px auto 0;
        text-align: center;
        display: flex;
        justify-content: center;
      }
    }

    .keyboard-main-content {
      width: 100%;
      padding-left: rem(32);
      background: #fff;
      text-align: center;

      tr {
        border-top: 1px solid #dfdfdf;

        & > td:nth-child(3) {
          border-right: none;
        }
      }

      td {
        border-right: 1px solid #dfdfdf;
        width: 33.3%;
        line-height: rem(108);
        font-size: rem(60);
        color: wordDfColor;

        &:active {
          background-color: #ebebeb;
        }
      }

      .clean {
        font-size: rem(32);

        &:active {
          background-color: mainColor;
        }
      }

      .del {
        display: table-cell;
        background-color: mainColor;

        &:active {
          background-color: #ebebeb;
        }

        img {
          width: rem(54);
          vertical-align: middle;
        }
      }
    }
  }

  // 支付方式选择
  .choosePayment {
    height: 481px;
    padding: 20px;

    ul {
      li {
        display: flex;
        align-items: center;
        height: 122px;
        justify-content: space-between;
        border-bottom: 1px solid #cccccc;

        div.left {
          display: flex;
          align-items: center;

          >span {
            display: block;
            width: 40px;
            height: 40px;
            font-size: 32px;
            background: #0c72e3;
            border-radius: 50%;
            color: #fff;
            line-height: 40px;
            text-align: center;
            margin-right: 30px;
          }

          >div {
            color: #a5a5a5;

            >p {
              font-size: 24px;

              &:first-child {
                font-size: 32px;
              }
            }
          }
        }

        div.right {
          width: 44px;
          height: 44px;
          background: url('./images/keyboard_check.jpg') no-repeat 100% / 100%;
        }
      }
    }

    >.actualPayMoney {
      margin-top: 116px;
      text-align: center;
      font-size: 32px;

      >span {
        color: #2c7dbc;
      }
    }

    >.confirm {
      margin: 68px auto 0;
      height: 94px;
      width: 688px;
      color: #fff;
      color: 32px;
      background: #0c72e3;
      border-radius: 10px;
      line-height: 94px;
      text-align: center;
    }
  }
}

.keyboard-mask {
  // 遮罩层
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 900;
  // filter: blur(rem(10))
  backdrop-filter: blur(10px);

  &.fade-enter-active {
    opacity: 1;
    background: rgba(7, 17, 27, 0.06);
    transition: all 0.3s;
  }

  &.fade-enter, &.fade-leave {
    opacity: 0;
    background: rgba(7, 17, 27, 0);
    backdrop-filter: blur(0px);
  }

  &.fade-leave-active {
    opacity: 0;
    background: rgba(7, 17, 27, 0);
    transition: all 0.3s;
  }
}
</style>
